import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';

import { Link } from 'react-router-dom';

import { actionCreators } from './store';
import { actionCreators as loginActionCreators } from '../../pages/login/store';

import {
	HeaderWrapper,
	Logo,
	Nav,
	NavItem,
	NavSearch,
	Addition,
	Button,
	SearchWrapper,
	SearchInfo,
	SearchInfoTitle,
	SearchInfoSwitch,
	SearchInfoList,
	SearchInfoItem
} from './style';

class Header extends Component {
	render() {
		const { focused, list, login, handleInputFocus, handleInputBlur, logout } = this.props; // immutable 对象

		const jsList = list.toJS(); // js 对象

		return (
			<HeaderWrapper>
				<Link to="/">
					<Logo />
				</Link>
				<Nav>
					<NavItem className="left active">首页</NavItem>
					<NavItem className="left">下载APP</NavItem>
					{login ? (
						<NavItem className="right" onClick={logout}>
							注销
						</NavItem>
					) : (
						<Link to="/login">
							<NavItem className="right">登录</NavItem>
						</Link>
					)}
					<NavItem className="right">
						<i className="iconfont">&#xe636;</i>
					</NavItem>
					<SearchWrapper>
						<CSSTransition in={focused} timeout={200} classNames="slide">
							<NavSearch
								className={focused ? 'focused' : ''}
								onFocus={() => handleInputFocus(jsList)}
								onBlur={handleInputBlur}
							/>
						</CSSTransition>
						<i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe614;</i>
						{this.getListArea()}
					</SearchWrapper>
					<Addition>
						<Link to="/write">
							<Button className="writting">
								<i className="iconfont">&#xe615;</i>
								写文章
							</Button>
						</Link>
						<Button className="reg">注册</Button>
					</Addition>
				</Nav>
			</HeaderWrapper>
		);
	}

	getListArea() {
		const {
			focused,
			mouseIn,
			list,
			page,
			totalPage,
			handleMouseEnter,
			handleMouseLeave,
			handleChangePage
		} = this.props; // immutable 对象
		const jsList = list.toJS(); // js 对象，也可直接用 immutable API get() 方法，详见 Home -> Topic
		const pageList = [];

		if (jsList.length) {
			for (let i = (page - 1) * 10; i < page * 10; i++) {
				pageList.push(<SearchInfoItem key={i}>{jsList[i]}</SearchInfoItem>);
			}
		}

		if (focused || mouseIn) {
			return (
				<SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
					<SearchInfoTitle>
						热门搜索
						<SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
							<i
								ref={icon => {
									this.spinIcon = icon;
								}}
								className="iconfont spin"
							>
								&#xe851;
							</i>
							换一换
						</SearchInfoSwitch>
					</SearchInfoTitle>
					<SearchInfoList>{pageList}</SearchInfoList>
				</SearchInfo>
			);
		} else {
			return null;
		}
	}
}

const mapStateToProps = state => {
	return {
		// immutable 对象 API

		// focused: state.getIn(['header', 'focused'])
		// or
		focused: state.get('header').get('focused'),
		mouseIn: state.get('header').get('mouseIn'),
		list: state.get('header').get('list'),
		page: state.get('header').get('page'),
		totalPage: state.get('header').get('totalPage'),
		login: state.getIn(['login', 'login'])
	};
};

const mapDispathToProps = dispatch => {
	return {
		handleInputFocus(list) {
			if (list.length === 0) {
				dispatch(actionCreators.getList());
			}
			dispatch(actionCreators.searchFocus());
		},

		handleInputBlur() {
			dispatch(actionCreators.searchBlur());
		},

		handleMouseEnter() {
			dispatch(actionCreators.mouseEnter());
		},

		handleMouseLeave() {
			dispatch(actionCreators.mouseLeave());
		},

		handleChangePage(page, totalPage, spin) {
			// icon 旋转
			let originAngle = spin.style.transform.replace(/[^0-9]/gi, ''); // 截取 transform 样式中数字内容，非数字替换为 ‘’
			if (originAngle) {
				originAngle = parseInt(originAngle, 10);
			} else {
				originAngle = 0;
			}
			spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';

			if (page < totalPage) {
				dispatch(actionCreators.changePage(page + 1));
			} else {
				dispatch(actionCreators.changePage(1));
			}
		},

		logout() {
			dispatch(loginActionCreators.logout());
		}
	};
};

export default connect(
	mapStateToProps,
	mapDispathToProps
)(Header);
